<template>
    <div class="yuan-container achievement-container">
        <a-spin tip="Loading..." :spinning="loading">
            <a-card title="我的成果">
                <a-tabs type="card" :default-active-key="pageType" @change="tabChange">
                    <a-tab-pane v-for="item in typeArr" :key="item.val" :tab="item.title"></a-tab-pane>
                </a-tabs>

                <div class="filter-panel">
                    <a-button style="float:right" type="primary" class="filter-list" @click="add">新增成果</a-button>

                </div>
                <div class="table" v-if="pageList.length>0">
                    <div class="page-list" v-for="item in pageList">
                        <div class="list-imgbox">
                            <img class="list-img" :src="item.coverPicture" />
                        </div>

                        <div class="list-mid">
                            <div class="list-title">{{item.achievementName}}</div>
                            <div class="list-type">{{item.belongToTechnologyCategory.join(',')}}</div>
                            <div class="proline-parent">
                                <div class="proline-box line-box">
                                    <template v-for="(sch,idx) in schList">
                                        <div class="proline-list proline-line" :class=" getProlineClass(idx,item)"></div>
                                    </template>

                                </div>
                                <div class="proline-box">
                                    <template v-for="(sch,idx) in schList">
                                        <div class="proline-list proline-words" :class="getProlineWordsClass(idx,item)">
                                            {{sch.title}}{{getProlineTimeOut(idx,item)}}</div>
                                    </template>
                                </div>
                            </div>
                        </div>
                        <div class="list-btnbox">
                            <a-button type="primary" class="list-btn" @click="clickRec(item)">智能推荐</a-button>
                            <a-button type="primarynull" class="list-btn" @click="clickEdit(item)"
                                v-if="item.state===0">修改</a-button>
                            <a-button type="primarynull" class="list-btn" @click="clickShow(item)" v-else>查看</a-button>
                            <a-popconfirm okText="确定" cancelText="取消" title="是否取消改成果" @confirm="clickDelete(item)">
                                <a-button type="dangernull" class="list-btn">取消发布</a-button>
                            </a-popconfirm>
                        </div>

                    </div>
                    <div style="text-align:right">
                        <a-pagination v-model="pagination.pageNum" :pageSize="pagination.pageSize" :total="pagination.total"
                            show-less-items />
                    </div>
                </div>
                <div class="page-content" v-else>
                    <div class="list-null">
                        <div class="iconfont">&#xe642;</div>
                        <div>暂无数据</div>
                    </div>

                </div>
            </a-card>
        </a-spin>
        <DetailVue :visible="detailVisible" @closeModal="() => detailVisible = false" @resetList="resetList" :editId="editId"
            :isShow="isShow" />
        <RecommendVue :visible="recommendVisible" @closeModal="() => recommendVisible = false" :recId="recId"
            @resetList="resetList" />
    </div>
</template>
<script lang="ts">
import api from "@/api/api";
import { Component, Vue } from "vue-property-decorator";
import DetailVue from "./detail.vue";
import RecommendVue from "./recommend.vue";
@Component({
    name: "tpl",
    components: { DetailVue, RecommendVue },
})
export default class extends Vue {
    schList = [
        { title: "资料审核", val: 0 },
        { title: "征集中", val: 1 },
        { title: "对接中", val: 2 },
        { title: "待审核", val: 3 },
        { title: "已转化", val: 4 },
        { title: "已公示", val: 5 },
    ];
    typeArr = [
        { title: "全部成果", val: "" },
        { title: "对接中成果", val: "2" },
        { title: "已转化成果", val: "4" },
        { title: "已公示成果", val: "5" },
    ];
    loading = false;
    pageList = [];
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    columns = [];

    mounted() {
        this.getList();
    }
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await api.getAchList({
                pageNum: this.pagination.current,
                pageSize: this.pagination.pageSize,
                state: this.pageType,
            });
            this.pageList = res.data?.rows ||[];
            this.pagination.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }

    pageType = "";
    tabChange(e: string) {
        const find = this.typeArr.find((item) => {
            return item.val === e;
        });
        this.pageType = e;

        this.resetList();
    }
    detailVisible = false;
    add() {
        this.isShow = false;
        this.editId = "";
        this.detailVisible = true;
    }
    editId = "";
    isShow = false;
    clickEdit(item) {
        this.isShow = false;
        this.editId = item.id;
        this.detailVisible = true;
    }
    clickShow(item) {
        this.isShow = true;
        this.editId = item.id;
        this.detailVisible = true;
    }
    async clickDelete(item) {
        this.loading = true;
        try {
            await api.deleteAch(item.id);
            this.$message.success("删除成功");
            this.getList();
        } finally {
            this.loading = false;
        }
    }

    recommendVisible = false;
    recId = "";
    clickRec(item) {
        this.recId = item.id;
        this.recommendVisible = true;
    }

    getProlineClass(idx, item) {
        if (idx === item.state && item.auditState === 2) {
            return "proline-timeout";
        } else if (idx < item.state) {
            return "proline-over";
        } else if (idx === item.state) {
            return "proline-on";
        } else if (idx > item.state) {
            return "proline-after";
        }
    }
    getProlineWordsClass(idx, item) {
        if (idx === item.state && item.auditState === 2) {
            return "proline-words-timeout";
        } else if (idx < item.state) {
            return "proline-words-over";
        } else if (idx == item.state) {
            return "proline-words-on";
        } else if (idx > item.state) {
            return "proline-words-after";
        }
    }
    getProlineTimeOut(idx, item) {
        if (idx === item.state && item.auditState === 2) {
            return "(失败)";
        }
        return "";
    }
}
</script>
<style scoped lang="scss">
.achievement-container {
    .page-list {
        display: flex;
        background-color: #f7f7f7;
        padding: 10px;
        align-items: center;
        margin-bottom: 20px;
        border-radius: 4px;
    }
    .list-imgbox {
        width: 230px;
        height: 150px;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
    }
    .list-img {
        max-width: 100%;
        max-height: 100%;
    }
    .list-mid {
        flex-grow: 1;
        padding: 0 15px;
    }
    .list-title {
        font-weight: bold;
        font-size: 18px;
        color: #102040;
    }
    .list-type {
        font-size: 16px;
        color: #333333;
        margin-top: 5px;
    }
    .proline-parent {
        padding: 5px 0;
        text-align: left;
        line-height: 16px;
    }
    .proline-box {
        display: flex;
        margin-top: 20px;
    }
    .line-box {
        margin-bottom: 5px;
        transform: translateX(5px);
        display: flex;
    }
    .proline-list {
        display: inline-block;
        width: 100px;
        flex-shrink: 0;
        color: #82848a;
    }
    .proline-line {
        height: 2px;
        background-color: #f9f9f9;
    }
    .proline-line:last-child {
        width: 10px;
        background-color: transparent;
    }
    .proline-line::before {
        content: "";
        width: 10px;
        height: 10px;
        display: inline-block;
        border-radius: 10px;
        background-color: #fff;
        vertical-align: top;
        position: relative;
        top: -4px;
    }
    .proline-timeout {
        background-color: rgba(130, 132, 138, 0.5);
    }
    .proline-timeout::before {
        background-color: #fe3d3d;
    }

    .proline-over {
        background-color: rgba(27, 196, 109, 1);
    }
    .proline-over::before {
        background-color: #1bc46d;
    }
    .proline-after {
        background-color: rgba(130, 132, 138, 0.5);
    }
    .proline-after::before {
        //background-color: #82848A;
        border: solid 1px #82848a;
    }
    .proline-on {
        background-color: rgba(130, 132, 138, 0.5);
    }
    .proline-on::before {
        background-color: #1bc46d;
    }

    .proline-words {
        padding: 0 2px;
    }
    .proline-words-over {
        color: #333;
    }
    .proline-words-on {
        color: #333;
    }
    .proline-words-after {
        opacity: 0.5;
    }
    .proline-words-timeout {
        color: #fe3d3d;
    }

    .list-btnbox {
        display: flex;
        flex-wrap: wrap;
        width: 270px;
        height: 100%;
        align-items: center;
        justify-content: center;
    }
    .list-btn {
        margin-bottom: 5px;
        margin-right: 5px;
    }
    .long-btn {
        width: 100px;
    }
}
</style>
